{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
{% from "govuk/components/label/macro.njk" import govukLabel %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/select/macro.njk" import govukSelect %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{% extends "layouts/examples.njk" %}

{% block styles %}
<style>
  .app-u-w-full {
    width: 100%;
  }

  .app-u-w-half {
    width: 50%;
    float: left;
  }

  .app-u-w-third {
    width: 33.33333333%;
    float: left;
  }

  .app-u-w-quarter {
    width: 25%;
    float: left;
  }

  .app-u-w-two-thirds {
    width: 66.66666667%;
    float: left;
  }
</style>
{% endblock %}

{% block beforeContent %}
  {{ govukBackLink({
    href: "/"
  }) }}
{% endblock %}

{% block content %}
  <h1 class="govuk-heading-xl">Error messages</h1>


  <form action="/" method="post">
    <h2 class="govuk-heading-m">Simple input</h2>

    {{ govukInput({
      label: {
        text: "National Insurance Number"
      },
      hint: {
        text: 'It’s on your National Insurance card, benefit letter,
        payslip or P60. For example, ‘QQ 12 34 56 C’.'
      },
      id: "input-1",
      name: "test-name",
      errorMessage: {
        text: "Enter your National Insurance Number"
      }
    }) }}

    <h2 class="govuk-heading-m">Multiple inputs</h2>

    {# Use fieldset to wrap around components and render collective error #}
    {% call govukFieldset({
      legendText: "User address"
    }) %}
      {# Passing below to fieldset to render #}
      {{ govukInput({
        label: {
          "text": "Street"
        },
        id: "input-2",
        name: "test-name",
        errorMessage: {
          text: "Enter valid street name"
        }
      }) }}
      {{ govukInput({
        label: {
          "text": "Town"
        },
        id: "input-3",
        name: "test-name"
      }) }}
      {{ govukInput({
        label: {
          "text": "City"
        },
        id: "input-4",
        name: "test-name"
      }) }}
    {# end fieldset render #}
    {% endcall %}

    <h2 class="govuk-heading-m">Radios with error message</h2>

    {{ govukRadios({
      fieldset: {
        legend: {
          text: "How do you want to be contacted?"
        }
      },
      errorMessage: {
        text: "Please select an option"
      },
      idPrefix: "radio-stacked",
      name: "radio-stacked",
      items: [
        {
          value: "email",
          text: "Email"
        },
        {
          value: "phone",
          text: "Phone"
        },
        {
          value: "text",
          text: "Text message"
        }
      ]
    }) }}

    <h2 class="govuk-heading-m">Checkboxes with error message</h2>

    {{ govukCheckboxes({
      fieldset: {
        legend: {
          text: "What type of waste do you want to dispose of?"
        }
      },
      errorMessage: {
        text: "Please select an option"
      },
      idPrefix: "checkboxes-stacked",
      name: "checkboxes-stacked",
      items: [
        {
          value: "waste-animal",
          text: "Waste from animal carcasses"
        },
        {
          value: "waste-mines",
          text: "Waste from mines or quarries"
        },
        {
          value: "waste-other",
          text: "Waste from other"
        }
      ]
    }) }}

    <h2 class="govuk-heading-m">Date input with shared error message</h2>

    {{- govukDateInput({
      fieldset: {
        legend: {
          text: "What is your date of birth?"
        }
      },
      hint: {
        text: 'For example, 31 3 1980'
      },
      errorMessage: {
        text: 'Date of birth must be in the past'
      },
      id: 'dob',
      name: 'dob',
      items:[
        {
          name: 'day',
          classes: 'govuk-input--width-2 govuk-input--error'
        },
        {
          name: 'month',
          classes: 'govuk-input--width-2 govuk-input--error'
        },
        {
          name: 'year',
          classes: 'govuk-input--width-4 govuk-input--error'
        }
      ]
      })
    -}}

    <h2 class="govuk-heading-m">Date input with single error message</h2>

    {{- govukDateInput({
      fieldset: {
        legend: {
          text: "What is your date of birth?"
        }
      },
      hint: {
        text: 'For example, 31 3 1980'
      },
      errorMessage: {
        text: 'Date of birth must include a day'
      },
      id: 'dob',
      name: 'dob',
      items:[
        {
          name: 'day',
          classes: 'govuk-input--width-2 govuk-input--error'
        },
        {
          name: 'month',
          value: '10',
          classes: 'govuk-input--width-2'
        },
        {
          name: 'year',
          value: '1985',
          classes: 'govuk-input--width-4'
        }
      ]
      })
    -}}

    <h2 class="govuk-heading-m">Select with error message</h2>

    {{ govukSelect({
      "id": "select-1",
      "name": "select-1",
      "label": {
        "html": "Label text goes here"
      },
      "errorMessage": {
        text: "Error message goes here"
      },
      "items": [
        {
          "value": 1,
          "text": "GOV.UK frontend option 1"
        },
        {
          "value": 2,
          "text": "GOV.UK frontend option 2",
          "selected": true
        },
        {
          "value": 3,
          "text": "GOV.UK frontend option 3"
        }
      ]
      }) }}

    <h2 class="govuk-heading-m">Textarea with error message</h2>

    {{ govukTextarea({
      id: "more-detail",
      name: "more-detail",
      label: {
        text: "Can you provide more detail?"
      },
      hint: {
        text: 'Don’t include personal or financial information, for example your National Insurance number or credit card details.'
      },
      "errorMessage": {
        text: "Error message goes here"
      }
      })
    }}

  </form>
{% endblock %}
